<template>
   <div class="sync">
     <div class="sync-content">
        <div><img :src="data.url" /></div>
        <div class="sync-pop">
            <div> {{ data.name }}</div>
            <div>&nbsp;{{ data.age }}</div>
        </div>
     </div>
     <div>{{ data.desc }}</div>
   </div>
</template>

<script setup lang='ts'>
import {ref ,reactive} from 'vue'
import {axios} from '../server/axios'

interface Data{
    data:{
        name:string,
        age:number,
        url:string,
        desc:string
    }
}
// setTimeout(() => {
//      data.value ={
//         "name":"inzv",
//         "age": 25,
//         "url":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
//         "desc":"某一年，你我暮年，静坐庭前，赏花落，笑谈浮华流年。"
//     }
// }, 3000);

const {data} = await axios.get<Data>('../../../public/data.json')
</script>

<style scoped>
    
</style>